<template>
  <div class="my">
    <loading v-if="loading"></loading>
    <div v-else>
      <div class="ad">
        <swipe :height="110" :autoplay="3000" indicator-color="white">
          <swipe-item v-for="(item, index) in swiperList" :key="index">
            <img :src="item.url" alt />
          </swipe-item>
        </swipe>
      </div>
      <div class="user-info">
        <div class="avatar">
          <img v-if="agentInfo.head_img" :src="staticHost + agentInfo.head_img" alt />

          <img v-else :src="defaultAvatar" alt />
        </div>
        <div class="info">
          <p>
            <span>{{agentInfo.name}}</span>
            <span>（{{agentInfo.level_name}}代理商）</span>
          </p>
          <p>
            <span>销售额：</span>
            <span class="price">￥{{Number(mySalesDetail.saleMoney).toFixed(2)}}</span>
          </p>
        </div>
        <div v-if="agentInfo.level_id != 1" class="upgrade" @click="goToUpgrade">
          <img src="../img/1倍升级.png" alt />
        </div>
      </div>

      <div class="orders">
        <div
          class="order-item"
          v-for="(item, index) in ordersList"
          :key="index"
          @click="goTo(item.to)"
        >
          <div>
            <div class="order-icon">
              <img :src="item.src" alt />
            </div>
            <div class="order-name">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
let moment = require("moment");
import { defaultAvatar, defaultAD } from "../service/default_source.js";
import { staticHost } from "../service/HOST.js";
import { Swipe, SwipeItem } from "vant";
import loading from "../components/loading.vue";

export default {
  components: {
    Swipe,
    SwipeItem,
    loading
  },
  data() {
    return {
      loading: true,
      staticHost,
      defaultAvatar: defaultAvatar,
      defaultAD: defaultAD,
      agentInfo: {},
      swiperList: [
        {
          to: "/home/my",
          url: defaultAD
        }
      ],
      date: "",
      mySalesDetail: {},
      ordersList: [
        {
          name: "我的钱包",
          src: require("../img/我的钱包@2x.png"),
          to: "/my_wallet"
        },
        {
          name: "我的销售",
          src: require("../img/我的销售@2x.png"),
          to: "/my_sales"
        },
        {
          name: "渠道",
          src: require("../img/渠道@2x.png"),
          to: "/channels"
        },
        {
          name: "我的云仓",
          src: require("../img/我要进货@2x.png"),
          to: "/my_cloud_store"
        },
        {
          name: "云仓订单",
          src: require("../img/云仓订单@2x.png"),
          to: "/cloud_store_orders"
        },
        {
          name: "提货订单",
          src: require("../img/提货订单@2x.png"),
          to: "/delivery_orders"
        },
        {
          name: "我的授权",
          src: require("../img/我的授权@2x.png"),
          to: "/my_auth_book"
        },
        {
          name: "我的推广",
          src: require("../img/我要推广@2x.png"),
          to: "/my_invite"
        },
        {
          name: "综合业务",
          src: require("../img/综合业务@2x.png"),
          to: "/integration"
        }
      ]
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  mounted() {
    this.date = moment(new Date()).format("YYYY-MM");
    Promise.all([
      this.getMySalesDetail(),
      this.getADList(),
      this.getHeadImg()
    ]).then(res => {
      this.loading = false;
    });
    // this.getMySalesDetail();
    // this.getADList();
    // this.getHeadImg()
  },
  methods: {
    // 获取用户信息（获取用户头像）
    getHeadImg() {
      return http
        .post(urls.DLXQ, {
          id: this.userInfo.id
        })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.agentInfo = data;
          }
        });
    },

    // 获取广告列表
    getADList() {
      return http
        .post(urls.HQGG, { id: 1 })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            data = data.split(",");
            // console.log(data);
            this.swiperList = [];
            for (let i = 0; i < data.length; i++) {
              this.swiperList.push({
                to: "",
                url: this.staticHost + data[i]
              });
            }
          } else {
            this.swiperList = [
              {
                to: "/home/my",
                url: this.defaultAD
              }
            ];
          }
        })
        .catch(() => {
          this.swiperList = [
            {
              to: "/home/my",
              url: this.defaultAD
            }
          ];
        });
    },

    // 获取用户销售额
    getMySalesDetail() {
      return http
        .post(urls.WDXS, {
          agentLevel: this.userInfo.agentLevel,
          userId: this.userInfo.id,
          // tokenId: this.userInfo.id,
          startDate: this.date
        })
        .then(res => {
          if (res.data.code == 200) {
            this.mySalesDetail = res.data.data;
          }
        }).catch(err=>{
          console.log("错误：", err)
        });
    },

    // 跳转到升级页面
    goToUpgrade() {
      this.$router.push({
        path: "/my_upgrade"
      });
    },
    goTo(path) {
      this.$router.push({
        path: path
      });
    }
  }
};
</script>

<style scoped>
.my {
  color: #878488;
  background-color: #f7f8ff;
  /* width: 100%; */
  /* height: 100%; */
  /* overflow-y: scroll; */
}

.my>div{
  width: 100%;
  height: 100%;
  /* overflow: scroll; */
}

.ad {
  width: 100%;
  /* max-height: 110px; */
  /* overflow: hidden; */
}

.ad img {
  width: 100%;
  height: auto;
  max-height: 100%
}

.user-info {
  display: flex;
  align-items: center;
  padding: 0.9rem 1.25rem;
  background-color: #fff;
}

.user-info .avatar {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid #eee;
  border-radius: 50%;
  overflow: hidden;
}

.user-info .avatar img {
  width: 100%;
  height: 100%;
}

.user-info .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-left: 15px;
}

.user-info .info .price {
  color: #ee7248;
}

.orders {
  --order-width: 32%;
  display: flex;
  padding: calc((100% - var(--order-width) * 3) / 2);
  justify-content: space-between;
  flex-wrap: wrap;
}

.order-item {
  margin-bottom: calc((100% - var(--order-width) * 3) / 2);
  width: var(--order-width);
  padding-top: var(--order-width);
  background-color: #fff;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.order-item > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.order-item .order-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.8rem;
}

.order-item .order-icon img {
  width: 100%;
  height: 100%;
}

.order-item .order-name {
  width: 100%;
  text-align: center;
}

.upgrade {
  position: absolute;
  right: 20px;
  width: 30px;
  height: 30px;
}

.upgrade img {
  width: 100%;
  height: 100%;
}
</style>

<style>
  .ad>.van-swipe{
    /* height: 3% !important; */
    /* max-height: 200px; */
    /* overflow: hidden; */
  }
</style>
